<template>
	<view>
		<uni-popup ref="popup0" type="center">
			<view
				style="width: 70vh;background-color: #fff;box-shadow: 1px 1px 1px #808080;border-radius: 4px;padding: 10px;font-size: small;">
				<view class="pop-header"
					style="display: flex;flex-direction: row;justify-content:space-between;align-items: start;border-bottom: 1px solid #808080;padding-bottom: 5px;">
					<text>{{curTitle}}</text>
					<uni-icons type="closeempty" size="16" color="#fff" class="gl-button-icon" @tap="close"
						style="background-color: #dd524d;padding: 2px;border-radius: 2px;"></uni-icons>
				</view>
				<view class="pop-body"
					style="font-size: smaller;max-height: 50vh;padding: 10px;display: flex;flex-direction: column;">
					<view style="display: flex;flex-direction: row;justify-content: space-between;">
						<label style="display: flex;align-items: center;padding: 5px 0;">
							<text style="width: 60px;">产品名称</text>
							<uni-easyinput errorMessage v-model="name" placeholder="请输入商品名称" @blur="inputName"
								trim="all"></uni-easyinput>
						</label>
						<label style="display: flex;align-items: center;padding: 5px 0;">
							<text style="width: 60px;">产品条码</text>
							<uni-easyinput errorMessage v-model="idcode" placeholder="请输入商品条码" @blur="inputRdCode"
								trim="all"></uni-easyinput>
						</label>
					</view>
					<view style="display: flex;flex-direction: row;justify-content: start;gap: 20px;">
						<label style="display: flex;align-items: center;padding: 5px 0;">
							<text style="width: 60px;">产品大类</text>
							<uni-data-select v-model="modep" :localdata="allModel" :clear="false"
								@change="changeModel"></uni-data-select>
						</label>
						<label style="display: flex;align-items: center;padding: 5px 0;">
							<text style="width: 60px;">产品小类</text>
							<uni-data-select v-model="mode" :localdata="allModes" :clear="false"
								@change="changeModes"></uni-data-select>
						</label>
					</view>
					<label style="display: flex;align-items: center;padding: 5px 0;">
						<text style="width: 60px;">产品简介</text>
						<uni-easyinput errorMessage v-model="content" placeholder="请输入商品简介"></uni-easyinput>
					</label>
					<checkbox-group @change="changeCheckBox"
						style="display: flex;flex-direction: row;justify-content: space-between;padding: 5px 0;">
						<label>
							<checkbox value="is_group" :checked="is_group" style="transform:scale(0.7)" />是否组合商品
						</label>
						<label>
							<checkbox value="is_master" :checked="is_master" style="transform:scale(0.7)" />是否考核商品
						</label>
						<label>
							<checkbox value="is_money" :checked="is_money" style="transform:scale(0.7)" />是否货币商品
						</label>
						<label>
							<checkbox value="is_points" :checked="is_points" style="transform:scale(0.7)" />是否积分商品
						</label>
					</checkbox-group>

				</view>
				<view class="pop-footer" style="border-top: 1px solid #808080; ">
					<view style="display: flex; justify-content: end;gap: 5px; padding-top: 10px;">
						<view class="gl-button gl-button-success" @tap="submit">
							<uni-icons type="checkmarkempty" size="18" color="#fff"></uni-icons>
							<text style="font-size: small;">保存</text>
						</view>
						<view class="gl-button gl-button-error" @tap="close">
							<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
							<text style="font-size: small;">取消</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	export default {
		name: "pop-goods-product",
		data() {
			return {
				sConf: getApp().globalData,
				curTitle:'新增商品',
				allModel: [],
				allModes: [],

				name: null,
				content: null,
				idcode: null,
				modep: 0,
				mode: 0,
				checkBoxGroup: null,

				is_group: false,
				is_master: false,
				is_money: false,
				is_points: false



			};
		},
		mounted() {
			console.log('组件挂载');
		},
		props: {
			title: {
				type: String
			}
		},
		methods: {
			open(e = null) {
				console.log('模态窗口', e);
				this.curTitle = e?'编辑商品':'新增商品';
				this.hasMode();
				this.refresh();
				this.$refs.popup0.open();
			},
			close() {
				this.$refs.popup0.close();
			},
			hasMode() {
				console.log('hasMode');
				let that = this;
				let data = {
					page: 1,
					size: 500,
					parent: 0
				}
				utils.adminGoodsModeList(this.sConf.host, this.sConf.auth.token, data).then((res) => {
					console.log('请求成功', res);
					if (res.rescode === 401) {
						this.logout();
					}
					if (res.rescode === 200) {
						that.allModel = []
						let newItem = {
							value: 0,
							text: '选择大类'
						}
						that.allModel.push(newItem);
						res.resmsg.forEach(item => {
							let newItem = {
								value: item.id,
								text: item.name
							}
							that.allModel.push(newItem);
						});
					}
				});
			},
			refresh() {
				console.log('refresh');
			},
			submit() {
				console.log('submit');
				let tmpObj = {};
				if (this.name.length < 2) {
					this.showModelToast('商品名称不合法');
					return
				} else {
					tmpObj.name = this.name
				}
				if (this.idcode && /^\d{13}$/.test(this.idcode)) {
					tmpObj.idcode = this.idcode
				}
				if (this.modep > 0 && this.mode > 0) {
					tmpObj.modep = this.modep
					tmpObj.mode = this.mode
				} else {
					this.showModelToast('商品分类未选择');
					return
				}
				if (this.content) {
					tmpObj.content = this.content
				}
				this.checkBoxGroup.forEach(item => {
					tmpObj[item] = 1
				})

				console.log(tmpObj);

				utils.adminGoodsProductPost(this.sConf.host, this.sConf.auth.token, tmpObj).then((res) => {
					console.log('请求成功', res);
					if (res.rescode === 401) {
						this.logout();
					}
					if (res.rescode === 200) {
						this.close()
					}
				});
			},
			changeModel(e) {
				console.log('changeModel', e);
				if (e < 1) {
					return;
				}
				let that = this;
				let data = {
					parent: e
				}
				utils.adminGoodsModeList(this.sConf.host, this.sConf.auth.token, data).then((res) => {
					console.log('请求成功', res);
					if (res.rescode === 401) {
						this.logout();
					}
					if (res.rescode === 200) {
						that.allModes = []
						let newItem = {
							value: 0,
							text: '选择小类'
						}
						that.allModes.push(newItem);
						res.resmsg.forEach(item => {
							let newItem = {
								value: item.id,
								text: item.name
							}
							that.allModes.push(newItem);
						});
					}
				});
			},
			changeModes(e) {
				console.log('changeModes');
			},
			changeCheckBox(e) {
				console.log('changeCheckBox', e);
				this.checkBoxGroup = e.detail.value;
			},
			inputName(e) {
				console.log('input', e);
				if (e.detail.cursor < 2) {
					uni.showToast({
						title: '商品名称不合法',
						icon: 'error'
					});
				}
			},
			inputRdCode(e) {
				console.log('inputRdCode', e);
				if (!/^\d{13}$/.test(e.detail.value)) {
					uni.showToast({
						title: '商品条码不合法',
						icon: 'error'
					});
				}
			},
			showModelToast(e) {
				uni.showToast({
					title: e,
					icon: 'error'
				});
			}
		}
	}
</script>

<style lang="scss">

</style>